<template>
  <div class="w-100 h-100 d-flex">
    <div class="left h-100">
      <div class="total">
        <div class="label">总数</div>
        <div class="count">{{ allCount }}</div>
      </div>
      <div
        class="item"
        v-for="item in levelData"
        :key="item.label"
      >
        <div class="box" :style="{ borderColor: item.color }">
          <div class="line" :style="{ borderColor: item.color }"></div>
          <div class="rightBg"></div>
          <div class="label">{{ item.label }}</div>
          <div class="value">
            <span>{{ Math.round(item.percent * allCount) }}</span
            >个
          </div>
        </div>
      </div>
    </div>
    <div class="center h-100" style="flex: 1; width: 0">
      <div id="wbrwlb" style="width: 100%; height: 100%"></div>
    </div>
    <div
      class="right h-100"
      style="
        flex: 1;
        width: 0;
        display: flex;
        justify-content: center;
        align-items: center;
      "
    >
      <fakeLenfend
        :color="list.map((item: any) => item.itemStyle.color)"
        :text="list.map((item:any) => item.name + ' ' + item.value)"
        :value="list.map((item:any) => ((item.value / allCount) * 100).toFixed(2) + '%')"
        orient="column"
        :color-block="true"
        class="fakeLenfend"
      >
      </fakeLenfend>
    </div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useOptions } from "@/hook/useOptions";

function generateData(
  totalNum: any,
  bigvalue: any,
  smallvalue: any,
  color: any
) {
  let dataArr = [];
  for (var i = 0; i < totalNum; i++) {
    if (i % 2 === 0) {
      dataArr.push({
        name: (i + 1).toString(),
        value: bigvalue,
        itemStyle: {
          normal: {
            color: color,
            borderWidth: 0,
          },
        },
      });
    } else {
      dataArr.push({
        name: (i + 1).toString(),
        value: smallvalue,
        itemStyle: {
          normal: {
            color: "rgb(0,0,0,0)",
            borderWidth: 0,
          },
        },
      });
    }
  }
  return dataArr;
}
let threeData = generateData(10, 40, 10, "#5CE1FF");
let startAngle = 50; // 初始旋转角度

const option = {
  tooltip: {
    backgroundColor: "rgba(28,64,81,0.7)",
    textStyle: {
      color: "white",
      fontSize: 20,
    },
    borderColor: "transparent",

  },
  title: [
    {
      text: "",
      x: "center",
      y: "42%",
      textStyle: {
        fontSize: 24,
        fontWeight: "normal",
        color: "#fff",
      },
    },
    {
      text: "总数: 个",
      x: "center",
      y: "52%",
      textStyle: {
        fontSize: 20,
        fontWeight: "normal",
        color: "#fff",
      },
    },
  ],

  series: [
    {
      name: "",
      type: "pie",
      clockWise: true,
      hoverAnimation: false,
      label: {
        show: false,
      },
      labelLine: {
        show: false,
      },
      radius: ["40%", "50%"],
      center: ["50%", "50%"],
      data: [],
    },
    {
      type: "pie",
      name: "旋转圆",
      zlevel: 20,
      silent: true,
      radius: ["57%", "56%"],
      hoverAnimation: false,
      startAngle: startAngle,
      data: threeData,
      label: {
        normal: {
          show: false,
        },
      },
      labelLine: {
        normal: {
          show: false,
        },
      },
    },
  ],
};

let myChart: any;

onMounted(() => {
  myChart = echarts.init(document.getElementById("wbrwlb") as HTMLElement);
  myChart.setOption(option);
});

const colors = useOptions().colorList;

const xData = ["维修任务", "保养任务"];

const dataList = xData.map((item: any, index: number) => ({
  name: item,
  color: colors[index],
}));

const levelData = ref([
  { label: "待办", percent: 0.9, color: colors[0] },
  { label: "已办", percent: 0.1, color: colors[1] },
]);

const props = defineProps({
  year: {
    default: 2024,
  },
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.underJsc.wbrwlb[props.year];
  } catch (error) {}

  return data;
});

const list: any = ref([]);
const allCount = ref(0);

watch(
  () => current.value,
  (val) => {
    if (val) {
      allCount.value = val.length
        ? val.reduce((pre: number, cur: number) => pre + cur)
        : 0;

      const data = val.map((value: any, index: number) => ({
        ...dataList[index],
        value,
        itemStyle: {
          color: dataList[index].color,
        },
      }));
      list.value = data;

      myChart.setOption({
        title: [
          {
            text: allCount.value,
          },
        ],
        series: [{ data }],
      });
    }
  }
);
</script>

<style scoped lang="less">
.left {
  width: 256px;
  margin-top: 24px;
  padding-right: 40px;
  position: relative;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  &::before {
    content: "";
    width: 2px;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    background: linear-gradient(
      180deg,
      rgba(92, 225, 255, 0) 0%,
      #5ce1ff 47%,
      rgba(92, 225, 255, 0) 100%
    );
  }
}
.total {
  height: 78px;
  background: url("@/assets/image/underground/gwgjsl.png") no-repeat center
    center;
  background-size: 100% 100%;
  text-align: center;
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  .count {
    color: #00f3ff;
    font-weight: bold;
    font-size: 36px;
    line-height: 1;
  }
}

.item {
  height: 56px;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  .box {
    width: 100%;
    border-left: 3px solid;
    padding-left: 2px;
    padding: 0 14px;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
  }
  .line {
    border-left: 1px solid;
    height: 100%;
    position: absolute;
    left: 2px;
    top: 0;
    opacity: 0.4;
  }
  .rightBg {
    width: 100px;
    opacity: 0.3;
    border-left: 10px solid transparent;
    border-bottom: 10px solid rgba(0, 243, 255, 0.2);
    position: absolute;
    right: 0;
    bottom: 4px;
  }
  .value {
    span {
      text-shadow: 0px 1px 4px #00f3ff;
      font-weight: bold;
      font-size: 28px;
      margin-right: 10px;
    }
  }
}
.fakeLenfend{
  :deep(.legend){
      margin-bottom: 20px;
  }
}
</style>
